<template>
  <view class="search-history">
    <view class="head">
      <view class="title">搜索历史</view>
      <view class="remove" @click="removeMyHistories">
        <image mode="aspectFit" src="/static/images/remove.png"></image>
      </view>
    </view>
    <view class="content">
      <view class="items">
        <view class="item" v-for="(history, index) in histories" :key="index" @click="wordClicked(history.word)">{{ history.word }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getHistories, removeHistories } from "api/searchApi"

export default {
  name: "ProductSearchHistoryCom",
  data: () => ({
    histories: []
  }),
  methods: {
    async loadSearchHistories() {
      const response = await getHistories()
      this.histories = response.data
    },
    async removeMyHistories() {
      await removeHistories()
      this.histories = []
      uni.showToast({title: '删除成功'})
    },
    wordClicked(word) {
      this.$emit('tapped', word)
    }
  },
  async created() {
    await this.loadSearchHistories()
  }
}
</script>

<style lang="scss" scoped>
.search-history {
  padding: 20rpx;
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {}
    .remove {
      image {
        width: 44rpx; height: 44rpx;
      }
    }
  }
  .content {
    .items {
      margin-top: 20rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .item {
        border-radius: 28rpx;
        background-color: #F1F1F1;
        font-size: 24rpx;
        margin-bottom: 20rpx;
        margin-right: 20rpx;
        padding:8rpx 20rpx;
      }
    }
  }
}
</style>
